<template>
  <view class="container">
    <view class="info-list">
      <view class="base">
        <view class="merchant-name">
          <view class="name">{{ storeInfo ? storeInfo.name : systemName }}</view>
        </view>
      </view>
      <view class="info-item" style="height: 100px;">
        <view class="contacts">
          <text class="name" style="top: 5px;position: relative;">类型</text>
          <view class="value leixing">
            <radio-group @change="statusChange">
              <label class="radio">
                <radio value="点阵波" color="#00acac" :checked="compoment == '点阵波' ? true : false"/>
                点阵波</label>
              <label class="radio second">
                <radio value="热疗" color="#00acac" :checked="compoment == '热疗' ? true: false"/>
                热疗</label>
              <label class="radio second">
                <radio value="生物微电" color="#00acac" :checked="compoment == '生物微电' ? true: false"/>
                生物微电</label>
              <label class="radio second">
                <radio value="纳米超导" color="#00acac" :checked="compoment == '纳米超导' ? true: false"/>
                纳米超导</label>
            </radio-group>
          </view>
        </view>
      </view>
      <view class="info-item" @click="getkai(3)">
        <view class="contacts">
          <text class="name">理疗时间</text>
          <text class="value">{{ time == '' ? '请选择' : time }}</text>
        </view>
      </view>

      <view class="info-item" @click="getkai(2)">
        <view class="contacts">
          <text class="name">选择开单医生</text>
          <text class="value">{{ medicalDoctor == '' ? '请选择' : getLabelByValue(medicalDoctor) }}</text>
        </view>
      </view>
      <view class="info-item" @click="getkai(1)">
        <view class="contacts">
          <text class="name">操作员工</text>
          <text class="value">{{ medicalService == '' ? '请选择' : getLabelByValue(medicalService) }}</text>
        </view>
      </view>
      <view class="info-item" style="height: 100px;">
        <view class="contacts">
          <text class="name" style="top: 5px;position: relative;">是否第三方收款</text>
          <view class="value leixing2">
            <radio-group @change="payChange">
              <label class="radio">
                <radio value="0" color="#00acac" :checked="isThirdPay == '0' ? true : false"/>
                否</label>
              <label class="radio second">
                <radio value="1" color="#00acac" :checked="isThirdPay == '1' ? true: false"/>
                是</label>
            </radio-group>
          </view>
        </view>
      </view>
    </view>
    <u-select v-model="show" mode="single-column" :list="slist" @confirm="confirm"></u-select>
    <u-select v-model="rilishow" mode="single-column" :list="timelist" @confirm="confirmtime"></u-select>
    <!-- <u-calendar v-model="rilishow" :mode="mode"  @change="confirmtime"></u-calendar> -->
    <!-- 底部操作按钮 -->
    <view class="footer-fixed">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" @click="save()">提交</view>
      </view>
    </view>


  </view>
</template>

<script>
import * as MerchantApi from '@/api/merchant'
import * as UploadApi from '@/api/upload'
import store from '@/store'
import * as settingApi from '@/api/setting'
import * as SettlementApi from '@/api/settlement'

export default {
  data() {
    return {
      //当前页面参数
      options: {},
      // 正在加载
      isLoading: true,
      imagePath: '',
      merchantInfo: {logo: '', name: '', status: 'false', phone: ''},
      medicalDoctor: '',//
      medicalService: '',
      slist: [],
      lei: 1,
      rilishow: false,
      mode: 'date',
      show: false,
      storeInfo: null,
      time: '',
      timelist: [
        {
          value: '30',
          label: '30分钟'
        },
        {
          value: '60',
          label: '60分钟'
        },
        {
          value: '90',
          label: '90分钟'
        },
      ],
      compoment: '',
      isThirdPay: 0
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // this.getMerchantInfo();
    this.systemConfig();
    this.getshuju()
  },

  methods: {
    systemConfig() {
      const app = this;
      settingApi.systemConfig()
          .then(result => {
            app.storeInfo = result.data.storeInfo;
          })
    },
    getshuju() {
      SettlementApi.getDoctorList({'storeId': uni.getStorageSync("storeId")})
          .then(result => {
            if (result.data) {
              console.log(result.data)
              let data = result.data.content
              let parms = []
              for (let i in data) {
                let a = {}
                a.label = data[i].realName
                a.value = Number(data[i].id)
                parms.push(a)
              }
              this.slist = parms
              // console.log(this.slist)
            }
          })
          .catch(err => {
            if (err.result) {
            }
          })
    },
    confirmtime(e) {
      // console.log(e.result)
      this.time = e[0].value
    },
    confirm(e) {
      console.log(e)
      if (this.lei == 1) {
        this.medicalService = e[0].value
      } else if (this.lei == 2) {
        this.medicalDoctor = e[0].value
      }

    },
    getkai(e) {
      console.log(e)
      this.lei = e
      if (this.lei == 1 || this.lei == 2) {
        this.show = true
      } else if (this.lei == 3) {
        this.rilishow = true
      }

    },
    /**
     * 保存设置信息
     */
    save() {
      const app = this
      if (!this.compoment) {
        app.$error('请选择类型');
        return;
      }
      if (!this.time) {
        app.$error('请选择理疗时间');
        return;
      }
      if (!this.medicalDoctor) {
        app.$error('请选择开单医生');
        return;
      }
      if (!this.medicalService) {
        app.$error('请选择操作员工');
        return;
      }
      SettlementApi.devicesave({
        storeId: this.storeInfo.id,
        compoment: this.compoment,
        medicalDoctor: this.medicalDoctor,
        medicalService: this.medicalService,
        time: this.time,
        isThirdPay: this.isThirdPay
      })
          .then(result => {
            console.log(result)
            if (result.data.id) {
              app.$success('操作成功！')
              setTimeout(() => {
                uni.navigateBack({delta: 1})
              }, 1000)
            }
          })
          .catch(err => {
            if (err.result) {
            }
          })
    },
    statusChange(e) {
      this.compoment = e.detail.value;
    },

    payChange(e) {
      this.isThirdPay = e.detail.value;
    },
    getLabelByValue(targetValue) {
      // 遍历数组匹配 value，找到后返回对应的 label
      const matchItem = this.slist.find(item => item.value === targetValue);
      // 无匹配项时返回空字符串，可根据需求改为 '未知' 等默认值
      return matchItem ? matchItem.label : '';
    },
  },

}
</script>

<style lang="scss" scoped>
.info-list {
  padding-bottom: 100rpx;
  margin-top: 25rpx;
}

// 项目内容
.info-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 40rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;

  .avatar-warp {
    line-height: 120rpx;
  }
}

.contacts {
  font-size: 30rpx;

  .name {
    margin-left: 0px;
  }

  .value {
    float: right;
    color: #999999;
    text-align: right;

    .second {
      margin-left: .6rem;
    }
  }

  .leixing {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 82%;
    line-height: 34px;
    align-items: flex-start;
  }

  .leixing2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    float: right;
    line-height: 34px;
    align-items: flex-start;
  }

  .password {
    text-align: right;
    float: left;
    padding-right: 5rpx;
  }

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 120rpx;
    border: solid 1px #cccccc;
    float: right;
  }
}

.item-option {
  display: flex;
  justify-content: space-between;
  height: 48rpx;
}

// 底部操作栏
.footer-fixed {
  height: 100rpx;
  z-index: 11;

  .btn-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
    border-radius: 40rpx;
  }

  .btn-item-main {
    background: #00acac;
    // background: linear-gradient(to right, #f9211c, #ff6335);
  }

  .btn-item-out {
    margin-top: 20rpx;
    background: #FFFFFF;
    border: 1px solid $fuint-theme;
    color: #666666;
  }

}

.base {
  background: $fuint-theme;
  padding: 30rpx;
  border-radius: 10rpx;
  color: #ffffff;
  margin: 20rpx;
  height: 100rpx;

  .merchant-name {
    margin-left: 30rpx;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    font-size: 30rpx;
  }
}
</style>
